<!--  -->
<template>
  <div class>
    <div class="serviceW">
      <section class="serviceTop">
        <h1>订单详情-待付款</h1>
        <div class="blank">
          <router-link to="/orderForm">
            <img src="../assets/back1.png" alt />
            <span>返回</span>
          </router-link>
        </div>
      </section>
      <section class="serviceBox">
        <div class="serviceBoxTop">
          <li class="img1">提交订单</li>
          <li class="img2">支付订单</li>
          <li class="img3">学习课程</li>
          <li class="img2">课程结束</li>
          <li class="img2">完成评价</li>
        </div>
        <div class="serviceCont">
          <div class="serviceInputBtn">
            <img src="../assets/tit1.png" alt class="img1" />
            <p>
              订单状态：
              <span>学习中</span>
            </p>
            <!-- <button class="serinp1" @click.stop="submitBtn"> -->
            <!-- <img src="../assets/back2.png" alt=""> -->
            <!-- <span>取消订单</span> -->
            <!-- <div class="serinp1Box" v-show="serShow"> -->
            <!-- <h4 @click="close1">取消订单</h4> -->
            <!-- <div class="serinp1con"> -->
            <!-- <div class="serinp1conL">操作备注</div> -->
            <!-- <div class="serinp1conR"> -->
            <!-- <textarea name="" id="" cols="30" rows="8"></textarea> -->
            <!-- </div> -->
            <!-- </div> -->
            <!-- <div class="serinp1Btom"> -->
            <!-- <button class="buttonC" @click="open" :plain="true">确定</button> -->
            <!-- <button @click="visible = false">取消</button> -->
            <!-- </div> -->
            <!-- </div> -->

            <!-- </button> -->
            <el-popover placement="right" width="400" v-model="visible">
              <h4>取消订单</h4>
              <div class="serinp1con">
                <div class="serinp1conL">操作备注</div>
                <div class="serinp1conR">
                  <textarea name id cols="30" rows="8"></textarea>
                </div>
              </div>
              <div style="text-align: right; margin: 0">
                <el-button
                  type="primary"
                  size="mini"
                  @click="visible = false"
                  style="margin-left:100px; background-color:#9137f3;"
                >确定</el-button>
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              </div>
              <el-button slot="reference">
                <img src="../assets/back2.png" alt />
                <span>取消订单</span>
              </el-button>
            </el-popover>

            <!-- <button class="serinp1" @click.stop="submitBtn"> -->
            <!-- <img src="../assets/open1.png" alt /> -->
            <!-- <span>结束课程</span> -->
            <!-- </button> -->
            <el-popover placement="right" width="400" v-model="visible1">
              <h4>结束课程</h4>
              <div class="serinp1con">
                <div class="serinp1conL">操作备注</div>
                <div class="serinp1conR">
                  <textarea name id cols="30" rows="8"></textarea>
                </div>
              </div>
              <div style="text-align: right; margin: 0">
                <el-button
                  type="primary"
                  size="mini"
                  @click="visible1 = false"
                  style="margin-left:100px; background-color:#9137f3;"
                >确定</el-button>
                <el-button size="mini" type="text" @click="visible1 = false">取消</el-button>
              </div>
              <el-button slot="reference">
                <img src="../assets/open1.png" alt />
                <span>结束课程</span>
              </el-button>
            </el-popover>

            <!-- <button class="serinp1" @click.stop="submitBtn"> -->
            <!-- <img src="../assets/dd.png" alt /> -->
            <!-- <span>添加备注</span> -->
            <!-- </button> -->
            <el-popover placement="right" width="400" v-model="visible2">
              <h4>添加备注</h4>
              <div class="serinp1con">
                <div class="serinp1conL">操作备注</div>
                <div class="serinp1conR">
                  <textarea name id cols="30" rows="8"></textarea>
                </div>
              </div>
              <div style="text-align: right; margin: 0">
                <el-button
                  type="primary"
                  size="mini"
                  @click="visible2 = false"
                  style="margin-left:100px; background-color:#9137f3;"
                >确定</el-button>
                <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
              </div>
              <el-button slot="reference">
                <img src="../assets/dd.png" alt />
                <span>添加备注</span>
              </el-button>
            </el-popover>
          </div>
          <p class="serTit">
            <img src="../assets/titline1.png" alt />
            <span>基础信息：</span>
          </p>
          <p class="serTit2">
            <span>订单编号：2019030102369669</span>
            <span>订单状态：学习中</span>
          </p>
          <p class="serTit2"></p>
          <p class="serTit2">
            <span>下单时间：2019-03-01 02:36</span>
            <span>付款时间：2018-08-05 10:25</span>
          </p>
          <p class="serTit2"></p>
          <p class="serTit2">
            <span>支付方式：微信支付</span>
            <span>赠送积分：24</span>
          </p>

          <!-- 买家信息： -->

          <p class="serTit">
            <img src="../assets/titline1.png" alt />
            <span>买家信息：</span>
          </p>
          <p class="serTit2">
            <span>用户微信：Cassy</span>
            <span>用户手机：15696996666</span>
            <span>用户地区：山东-济南</span>
          </p>

          <!-- <p class="serTit2"></p> -->

          <p class="serTit">
            <img src="../assets/titline1.png" alt />
            <span>课程信息：</span>
          </p>
          <ul class="serUl">
            <li class="id idW">课程ID</li>
            <li class="id nameW bordL">课程名称</li>
            <li class="id ingW bordL">列表图</li>
            <li class="id classW bordL">课程上架</li>
            <li class="id mayW bordL">报名费（元）</li>
          </ul>
          <ol class="serOl">
            <li class="olCOn idW">20182536</li>
            <li class="olCOn nameW bordL2">幼儿英语入门课程</li>
            <li class="olCOn ingW bordL2">
              <img src="../assets/classimg1.png" alt />
            </li>
            <li class="olCOn classW bordL2">上架</li>
            <li class="olCOn mayW bordL2">256.00</li>
          </ol>

          <!--  -->

          <p class="serTit">
            <img src="../assets/titline1.png" alt />
            <span>订单信息：</span>
          </p>
          <ul class="serUl">
            <li class="id idW">订单金额</li>
            <li class="id nameW bordL">优惠券</li>
            <li class="id ingW bordL">积分优惠</li>
            <li class="id lastW bordL">实付金额</li>
          </ul>
          <ol class="serOl">
            <li class="olCOn idW">￥2566.00</li>
            <li class="olCOn nameW bordL2">-￥10.00</li>
            <li class="olCOn ingW bordL2">-￥10.00</li>
            <li class="olCOn lastW bordL2">￥2366.00</li>
          </ol>

          <!--  -->

          <p class="serTit">
            <img src="../assets/titline1.png" alt />
            <span>订单操作记录：</span>
          </p>
          <ul class="serUl">
            <li class="id idW">操作人</li>
            <li class="id nameW bordL">操作时间</li>
            <li class="id ingW bordL">操作内容</li>
            <li class="id lastW bordL">备注</li>
          </ul>
          <ol class="serOl">
            <li class="olCOn idW">Daisy</li>
            <li class="olCOn nameW bordL2">2015-10-23 10:25</li>
            <li class="olCOn ingW bordL2">无</li>
            <li class="olCOn lastW bordL2">老客户订单</li>
          </ol>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      serShow: false,
      visible: false,
      visible1: false,
      visible2: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    close1: function () {},
  },
  //方法集合
  methods: {
    submitBtn: function () {
      this.serShow = true;
    },
    close1: function () {
      console.log(1);
      this.serShow = false;
    },
    open: function () {
      this.$message({
        message: "保存成功！",
        type: "success",
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
a {
  text-decoration: none;
  color: #9137f3;
}
input,
button {
  outline: none;
}
ul,
li,
ol {
  list-style: none;
}
i,
em {
  font-style: normal;
}
.serviceW {
  width: 1100px;
  margin: 0 auto;
  color: #333;
  font-size: 14px;
}
h1 {
  height: 70px;
  line-height: 70px;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  color: #9137f3;
}
.serviceBox {
  border: 1px solid #e4e4e4;
  padding: 30px 30px;
  min-height: 598px;
}
.serviceTop {
  display: flex;
  justify-content: space-between;
}
.blank {
  width: 78px;
  height: 32px;
  border: 1px solid #9137f3;
  border-radius: 0.2em;
  line-height: 32px;
  margin-top: 20px;
}
.blank img {
  padding: 0 10px;
}
.serviceBoxTop {
  height: 36px;
}
.serviceBoxTop li {
  float: left;
  width: 150px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 12px;
  color: #999;
  font-weight: bold;
}
.serviceBoxTop .img1 {
  background: url(../assets/bg1.png) no-repeat center;
  color: #fff;
}
.serviceBoxTop .img2 {
  background: url(../assets/bg2.png) no-repeat center;
}
.serviceBoxTop .img3 {
  background: url(../assets/bg2.png) no-repeat center;
}
.serviceInputBtn {
  height: 32px;
  line-height: 32px;
  margin-top: 30px;
}
.serviceInputBtn p,
.serviceInputBtn img {
  color: #00cc99;
  font-weight: bold;
  float: left;
}
.serviceInputBtn p {
  margin-right: 94px;
}
.serviceInputBtn .img1 {
  display: block;
  margin: 3px 10px 0 0;
}

.serviceInputBtn .serinp1 {
  display: block;
  float: left;
  width: 90px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #9137f3;
  background: #fff;
  margin: 0 5px;
  border-radius: 0.2em;
  text-align: center;
  color: #9137f3;
  font-size: 12px;
  position: relative;
}
.el-button {
  float: left;
  width: 90px !important;
  height: 30px !important;
  line-height: 30px !important;
  border: 1px solid #9137f3 !important;
  font-size: 12px !important;
  padding: 0 !important;
  margin-right: 10px !important;
}
.el-button span {
  color: #9137f3 !important;
}
.el-button img {
  width: 16px;
  height: 16px;
  margin: 5px 0 0 6px;
}
.el-popover {
  height: 32px !important;
  display: flex !important;
  justify-content: center !important;
}
.serviceInputBtn .serinp1 img {
  width: 16px;
  height: 16px;
  margin: 6px 0 0 6px;
}
.serviceInputBtn .serinp1:nth-of-type(2) img {
  width: 22px !important;
  height: 22px !important;
  margin: 4px 0 0 6px !important;
}
/* .serinp1 position */
.serinp1Box {
  width: 380px;
  height: 285px;
  padding: 10px;
  position: absolute;
  top: 8px;
  left: 95px;
  background: #fff;
  box-shadow: #e4e4e4 0 0 10px;
  z-index: 1;
}
.serinp1Box h4 {
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  background: url(../assets/close2.png) no-repeat right center;
}
.serinp1con {
  margin: 30px 0;
  height: 130px;
}
.serinp1con .serinp1conL {
  float: left;
  font-size: 12px;
  color: #333;
}
.serinp1con .serinp1conR {
  float: left;
  width: 300px;
  height: 125px;
  margin-left: 20px;
  border: 1px solid #e4e4e4;
  border-radius: 0.3em;
}
.serinp1con .serinp1conR textarea {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
}
.serinp1Btom {
  display: flex;
  justify-content: center;
}
.serinp1Btom button {
  width: 60px;
  height: 29px;
  border-radius: 0.2em;
  color: #fff;
  text-align: center;
  line-height: 29px;
  border: 0;
  background: #ccc;
}
.serinp1Btom .buttonC {
  background: #9137f3 !important;
  margin-right: 45px;
}
.serTit {
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  margin: 35px 0 20px 0;
}
.serTit img,
.serTit span {
  display: block;
  float: left;
  margin-right: 10px;
}
.serTit img {
  margin-top: 2px;
}
.serTit2 {
  color: #999;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  white-space: pre;
}
.serTit2 span {
  width: 335px;
  float: left;
  height: 20px;
}
.serUl {
  width: 824px;
  height: 40px;
  background: #9137f3;
}
.serOl {
  width: 824px;
  height: 79px;
  border: 1px solid #e4e4e4;
  border-top: 0;
}

.id {
  height: 40px;
  line-height: 40px;
  float: left;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.olCOn {
  height: 79px;
  line-height: 79px;
  float: left;
  color: #999;
  font-weight: bold;
  text-align: center;
}
.olCOn img {
  width: 100px;
  height: 60px;
  margin-top: 8px;
}
.bordL {
  border-left: 1px solid #9137f3;
}
.bordL2 {
  border-left: 1px solid #e4e4e4;
}
.idW {
  width: 127px;
}
.nameW {
  width: 177px;
}
.ingW {
  width: 189px;
}
.classW {
  width: 152px;
}
.mayW {
  width: 176px;
}
.lastW {
  width: 328px;
}
</style>